<!-- 模块说明 -->
<template>
    <div class="div_boxs_lnteado">
        <div class="top">
            <div>
                <van-nav-bar title="购物车" left-text="" right-text="我的订单" left-arrow @click-left="onClickLeft"
                    @click-right="onClickRight" />
            </div>
        </div>
        <div class="center">
            <div class="same">
                <ul>
                    <li>
                        <div class="same">
                            <div class="car_top">
                                <div style="display: flex;justify-content: center;align-items: center;">
                                    <img class="img1"
                                        src="https://img1.baidu.com/it/u=1273075546,211023118&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                                        alt="">
                                    <span style="margin-left:10px">tgzdj</span>
                                </div>
                                <span style="color: #a1a1a1; font-size:14px;">辽宁科技学院</span>
                            </div>
                            <div class="car_bottom">

                                <van-checkbox v-model="checked"></van-checkbox>
                                <img class="img2"
                                    src="https://img1.baidu.com/it/u=3439680933,2182861633&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                                    alt="">

                                <div class="sa">
                                    <p>过富国穷</p>
                                    <p style="color: #a1a1a1">九成新</p>
                                    <p><b style="color: #ccad74">￥ 20</b>&emsp;<span style="text-decoration:line-through; color:#a1a1a1">￥62</span></p>
                                </div>
                                <div class="cha">
                                    <p style="margin-left: 68px"><van-icon name="cross" /></p>
                                    <p>
                                        <van-stepper v-model="value" />
                                    </p>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="bottom">
            <div class="same">
                <p>合计：<span>￥0.00</span></p>
                <van-button round size="normal" color="#ccad74">&emsp;&emsp;结算&emsp;&emsp;</van-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { showToast } from 'vant';


const checked = ref(false);
const value = ref(1)
const onClickLeft = () => history.back();
const onClickRight = () => showToast('按钮');
</script>

<style lang="scss" scoped>
.div_boxs_lnteado {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
}
.top {
    height: 7vh;
    // border-bottom: 1px solid red;
}

.center {
    flex: 1;
    background: #f1f1f1;
    overflow: auto;

    li {
        height: 165px;
        background: #fff;
        box-shadow: 5px 5px 20px #a1a1a1;
        // border-radius: 10px;
        margin-top: 10px;
        overflow: hidden;
        // border: 1px solid red;

        .car_top {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
          

            .img1 {
                width: 30px;
                height: 30px;
                border-radius: 50%;
            }
        }

        .car_bottom {
            margin-top: 17px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .img2 {
                width: 70px;
                height: 95px;
                // border: 1px solid pink;
            }

            .cha, .sa {
                height: 95px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                // border: 1px solid #000;
            }
        }
    }
}

.bottom {
    height: 7vh;
    background: #fff;
    .same {
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
            font-weight: bold;
            color:#ccad74;
        }
    }
}
</style>
